<!--  -->
<template>
  <div>
      <Header></Header>
      <Swiper :swiperImg="swiperImg"></Swiper>
      <List :dataList="dataList"></List>
      <Dingwei></Dingwei>
      <Temai></Temai>
      <Group :hotList="hotList"></Group>
      <Concat :likeList="likeList"></Concat>
      <Loder :vacationList="vacationList"></Loder>
      <Footer></Footer>
  </div>
</template>

<script>
import { mapState } from "vuex";

import Header from "./pages/header";
import Swiper from "./pages/swiper";
import List from "./pages/list";
import Dingwei from "./pages/dingwei";
import Temai from "./pages/temai";
import Group from "./pages/group";
import Concat from "./pages/concat";
import Loder from "./pages/loder";
import Footer from "./pages/footer";

export default {
  name: "home",
  data() {
    return {
      swiperImg: "",
      dataList: "",
      hotList: "",
      likeList: "",
      vacationList: "",
      ccName: ""
    };
  },
  components: {
    Header,
    Swiper,
    List,
    Dingwei,
    Temai,
    Group,
    Concat,
    Loder,
    Footer
  },
  computed: {
    ...mapState(["cityName"])
  },
  methods: {
    gethttp() {
      this.$http.get("/api/dataHome.json").then(res => {
        let data = res.data.data;
        data.forEach((item, index) => {
          if (this.ccName == item.city) {
            this.swiperImg = item.swiperList;
            this.dataList = item.iconsList;
            this.hotList = item.hotList;
            this.likeList = item.likeList;
            this.vacationList = item.vacationList;
          }
        });
      });
    }
  },
  mounted() {
    this.ccName = this.cityName;
    // console.log( this.ccName)
    this.gethttp()
  },
  activated(){
    if(this.ccName!=this.cityName){
      this.gethttp()
      this.ccName=this.cityName
    }
  }
};
</script>
<style scoped>
</style>